@()(implicit session: Session)

@config.main("Home") {

    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("my-icon/style.css")">


    <style>

            .panel-default {
                border-color: #ddd;
            }

            .panel-body{
                border: 1px #ddd solid;
            }

            .panel {
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
            }
            .panel {
                margin-bottom: 20px;
                background-color: #fff;
                border: 1px solid transparent;
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
                border-radius: 4px;
                -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
                box-shadow: 0 1px 1px rgba(0,0,0,.05);
            }

            .panel-title {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 16px;
                color: inherit;
            }

            .panel-default > .panel-heading {
                background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
                background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
                background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));
                background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
                background-repeat: repeat-x;
            }
            .panel-default > .panel-heading {
                color: #333;
                background-color: #f5f5f5;
                border-color: #ddd;
            }


            .panel-heading {
                padding: 10px 15px;
                border: 1px #ddd solid;
                border-bottom: 1px solid transparent;
                border-bottom-color: transparent;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }

            .panel-body {
                padding: 15px;
            }
            .thumbnail {
                //height: 200px;
                height: 144px;
                box-shadow: 0 1px 2px rgba(0,0,0,.075);
                display: block;
                padding: 4px;
                margin-bottom: 20px;
                line-height: 1.42857143;
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 0;
                -webkit-transition: border .2s ease-in-out;
                -o-transition: border .2s ease-in-out;
                transition: border .2s ease-in-out;
            }

        .banner-img{
            width: 24%;
            height: 250px;
            background-size: cover;
        }

    </style>

    @if(session.get("lang") == Option("cn")){
        @cnIndex
    }else{
        @enIndex
    }

    <footer>Copyright © Copyright 2021 Auto Parts All Right Reserved </footer>


}

    @enIndex = {
        <div class="body-box">
            <div class="index-box">

                <div class="banner-img" style="background-image: url('/COADB/assets/images/1.png');background-position-y: 0px"></div>
                <div class="banner-img" style="background-image: url('/COADB/assets/images/2.jpg');background-position-y: 0px"></div>
                <div class="banner-img" style="background-image: url('/COADB/assets/images/3.png');background-position-y: 0px"></div>
                <div class="banner-img" style="background-image: url('/COADB/assets/images/4.jpg');background-position-y: 0px"></div>

            </div>
            <div class="index-box" style="padding-top: 0">

                <div style="background-color: #eee;font-size: 18px;font-weight: bold;text-indent: 2em;padding: 10px">
                    <p style="text-align: justify">   Oil-tea camellia is documented as traditional woody edible oil crop species in East and Southeast
                        Asia, with their cultivation and use for edible oil in China dating back more than 2000 years.
                        China is currently the only country with a substantial production of camellia oil, and the main
                        cultivated species are <i>Camellia oleifera</i>, <i>Camellia meiocarpa</i>, <i>Camellia chekiangoleosa</i> and so on.</p>

                    <p style="text-align: justify">    A high-quality reference genome could provide researchers with great convenience. Several
                        oil-tea camellia genome sequences have recently been released and there are increasing multiomics
                        studies based on their genomes, transcriptomes, proteomes, non-coding RNA, and genome-wide
                        association studies that have fully revealed the biological properties of oil-tea camellia and
                        provided researchers with new insights to better develop economic value of oil-tea camellia.</p>


                </div>

        </div>
            <div class="index-box" style="white-space: normal;justify-content: space-around">

                @pngBox2("Genome","genome.jpg",routes.GenomeController.genomeInfoPage)
                @pngBox2("Phenome","phe.jpg",routes.PhenotypeController.phenotypePage)
                @pngBox2("Markers/\nQTLs","marker.jpg",routes.QtlController.qtlInfoPage)
                @pngBox2("Maps","maps.jpg",routes.HomeController.blankPage("Maps"))
                @pngBox2("Cultivars","cultivars.jpg",routes.FruitController.fruitPage)
                @pngBox2("Tools","tools.jpg",routes.ToolsController.toolPage)

            </div>

    }

    @cnIndex={
        <div class="body-box">
            <div class="index-box">

                <div class="banner-img" style="background-image: url('/COADB/assets/images/1.png');background-position-y: 0px"></div>
                <div class="banner-img" style="background-image: url('/COADB/assets/images/2.jpg');background-position-y: 0px"></div>
                <div class="banner-img" style="background-image: url('/COADB/assets/images/3.png');background-position-y: 0px"></div>
                <div class="banner-img" style="background-image: url('/COADB/assets/images/4.jpg');background-position-y: 0px"></div>

            </div>
            <div class="index-box" style="padding-top: 0">

                <div style="background-color: #eee;font-size: 18px;font-weight: bold;text-indent: 2em;padding: 10px;">
                    <p style="text-align: justify">  油茶是东亚和东南亚地区传统的木本食用油料作物，其在中国的种植和使用可追溯到2000多年前。中国是目前世界上唯一一个油茶
                        油产量可观的国家，主要栽培品种有<i>Camellia oleifera</i>, <i>Camellia meiocarpa</i>, <i>Camellia chekiangoleosa</i>等。</p>



                <p style="text-align: justify">   高质量的参考基因组可以为研究人员提供极大的便利。近年来，一些油茶基因组序列的发布，以及基于其基因组、转录组、蛋白质组、
                    非编码RNA和全基因组关联研究的多组学研究日益增多，充分揭示了油茶的生物学特性，为更好地开发油茶的经济价值提供了新的见解。</p>

                </div>
            </div>



            <div class="index-box"  style="white-space: normal;justify-content: space-around">
                @pngBox2("基因组","genome.jpg",routes.GenomeController.genomePage("Coleifera"))
                @pngBox2("表型信息","phe.jpg",routes.PhenotypeController.phenotypePage)
                @pngBox2("Markers/\nQTLs","marker.jpg",routes.QtlController.qtlPage)
                @pngBox2("Maps","maps.jpg",routes.HomeController.blankPage("Maps"))
                @pngBox2("品种信息","cultivars.jpg",routes.FruitController.fruitPage)
                @pngBox2("工具","tools.jpg",routes.ToolsController.toolPage)
            </div>

        </div>

    }




@pngBox2(title: String, img: String, href: Call) = {

    <a class="col-md-2 png-link" href="@href" target="_blank">

        <div style="height: 115px;display: flex;justify-content: center">

                    <img src="@routes.Assets.versioned("images/" + img)" style="max-width: 120px;max-height:115px">
                    </div>
                    <h3 style="font-size: 30px">@title </h3>


    </a>
}